<template>
  <view class="set-category">
    <!-- 删除确认弹窗 -->
    <wd-message-box></wd-message-box>
    <view class="wrapper flex-column">
      <view class="add">
        <wd-icon name="add" size="24px" @click="addCategory"></wd-icon>
      </view>
      <view class="update-category">
        <view class="list-wrap flex-column">
          <view class="title">已有分类</view>
          <view class="item-wrap">
            <view
              class="category-item flex-column"
              v-for="item of categoryList"
              :key="item.id"
            >
              <view class="first">
                <span class="label">{{ item.first_category }}</span>
              </view>
              <view
                class="second flex"
                v-if="item.second_category && item.second_category.length !== 0"
              >
                <wd-tag
                  v-for="child of item.second_category"
                  :key="child"
                  type="warning"
                  plain
                  use-icon-slot
                  round
                >
                  {{ child }}
                </wd-tag>
              </view>
              <view class="operate flex">
                <img
                  src="https://www.sushu.online/clothesImages/update.svg"
                  @click="edit(item)"
                />
                <img
                  class="delete-icon"
                  src="https://www.sushu.online/clothesImages/delete.svg"
                  @click="deleteCategory(item)"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <AddType ref="addTypeRef" @commitFinished="getList" />
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useMessage } from "@/node_modules/wot-design-uni";
const message = useMessage();

import {
  getClothesTypeList,
  deleteClothesTypeList,
} from "../../api/clothes/type";
import AddType from "./addType.vue";

const addTypeRef = ref(null);
const addCategory = () => {
  for (const k in addTypeRef.value) {
    addTypeRef.value[k] = "";
  }
  addTypeRef.value.show = true;
};

const categoryList = ref([]);
function getList() {
  getClothesTypeList().then((res) => {
    if (res.code === 0) {
      res.data.forEach((item) => {
        item.second_category = item.second_category
          ? item.second_category?.split(",")
          : [];
      });
      categoryList.value = res.data;
    }
  });
}
onMounted(() => {
  getList();
});

function edit(item) {
  addTypeRef.value.form.id = item.id;
  addTypeRef.value.form.first_category = item.first_category;
  addTypeRef.value.form.second_category = item.second_category.join(",");
  addTypeRef.value.show = true;
}
function deleteCategory(item) {
  message
    .confirm({
      msg: `确认要删除【${item.first_category}】这一分类吗？其下的二级分类将全部清除；若只想要删除某个二级分类，请使用编辑功能`,
      title: "删除",
      cancelButtonProps: {
        type: "error",
        customClass: "custom-shadow",
      },
      confirmButtonProps: {
        type: "success",
        customClass: "custom-shadow",
      },
    })
    .then(() => {
      console.log("点击了确定按钮");
      console.log(item);
      deleteClothesTypeList({
        id: item.id,
      }).then((res) => {
        if (res.code === 0) {
          getList();
        }
      });
    })
    .catch(() => {
      console.log("点击了取消按钮");
    });
}
</script>

<style scoped lang="scss">
.set-category {
  background-color: #f7f7f7;
  height: 100%;

  .wrapper {
    height: 100%;
    padding-bottom: 64rpx;
    box-sizing: border-box;

    .add {
      padding: 32rpx;
    }

    .update-category {
      flex: 1;
      overflow: hidden;

      .list-wrap {
        width: 90%;
        height: 100%;
        margin: 0 auto;
        background: linear-gradient(135deg, #ebe8e8, #fdfafa);
        padding: 32rpx;
        padding-top: 16rpx;
        box-sizing: border-box;
        overflow-y: scroll;
        border-radius: 8px;

        .title {
          color: #333;
          font-size: 34rpx;
        }

        .item-wrap {
          .category-item {
            min-height: 300rpx;
            margin-top: 64rpx;
            padding: 32rpx;
            padding-top: 16rpx;
            box-sizing: border-box;
            background-color: #fff;
            box-shadow: 0 0 3px $uni-border-color;
            border-radius: 0 64rpx 0 64rpx;
            justify-content: space-between;

            .first {
              font-weight: bold;
              font-size: 40rpx;
            }

            .second {
              flex-wrap: wrap;

              :deep(.wd-tag) {
                height: 48rpx;
                width: calc(33.33% - 44rpx);
                margin: 16rpx 0 0 32rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 28rpx;
                padding: 4px 0;
              }
            }

            .operate {
              margin-top: 32rpx;
              box-sizing: border-box;
              align-self: flex-end;

              //   button {
              //     border-radius: 8px;
              //     height: 64rpx;
              //     line-height: 64rpx;
              //     width: 192rpx;
              //     text-align: center;
              //     font-size: 32rpx;
              //     background-color: #fa4350;
              //     color: #fff;
              //     margin-left: 16rpx;

              //     &.edit {
              //       background-color: #4d80f0;
              //     }
              //   }

              image {
                width: 48rpx;
                height: 48rpx;
              }

              .delete-icon {
                margin-left: 16rpx;
              }
            }

            &:first-child {
              margin-top: 32rpx;
            }
          }
        }
      }
    }
  }
}

:deep() {
  .wd-message-box {
    .custom-shadow {
      box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%),
        0 1px 5px 0 rgb(0 0 0 / 12%);
    }
  }
}
</style>
